<template>
  <cloudPage :isLoading="pageLoading">
    <cloudHeader slot="gHeader">
      <view class="grace-header-body" style="background:#fff;">
        <!-- 返回按钮 -->
        <view
          class="grace-header-icons grace-icons icon-arrow-left"
          style="color:#000;"
          @tap.stop="handleNavBack"
        ></view>
        <!-- 中间内容 -->
        <view
          class="grace-header-content-noflex grace-text-center font-32"
          style="color:#000;"
        >
          {{ $t("otc.release.title") }}
        </view>
        <!-- 右侧按钮 -->
        <view class="icons grace-icons" style="font-size:38rpx;"></view>
      </view>
    </cloudHeader>
    <view class="gbody main" v-if="!pageLoading">
      <form class="grace-form" style="margin-top:10rpx;">
        <view class="grace-form-item b-b">
          <text class="grace-form-label">{{ $t("otc.release.currency") }}</text>
          <view class="grace-form-body">
            <picker
              class="grace-form-picker"
              @change="selectCoin"
              :value="coinIndex"
              :range="coinSelect"
              name="gender"
            >
              <text class="grace-text">{{ coinSelect[coinIndex] }}</text>
              <text
                class="grace-icons icon-arrow-down"
                style="margin-left:5px;"
              ></text>
            </picker>
          </view>
        </view>
        <view class="grace-form-item b-b">
          <text class="grace-form-label">
            {{ $t("otc.release.payment_method") }}
          </text>
          <view class="grace-form-body" style="padding:20rpx 0;">
            <checkbox-group @change="selectPayment">
              <label
                class="grace-check-item"
                v-for="item in bankTypes"
                :key="item.value"
                ><checkbox
                  :value="item.value"
                  style="transform:scale(0.7)"
                  :disabled="banks[item.value].length == 0"
                  :class="{
                    'checkbox-disabled': banks[item.value].length == 0
                  }"
                ></checkbox
                ><text class="cell-side">{{ item.name }}</text>
              </label>
            </checkbox-group>
          </view>
        </view>
        <view class="grace-form-item b-b">
          <text class="grace-form-label">
            {{ $t("otc.release.order_type") }}
          </text>
          <view class="grace-form-body" style="padding:20rpx 0;">
            <radio-group @change="selectSide">
              <label class="grace-check-item"
                ><radio value="1" :checked="form.side == 1"></radio
                ><text class="cell-side">{{ $t("otc.index.sellout") }}</text>
              </label>
              <label class="grace-check-item"
                ><radio value="2" :checked="form.side == 2"></radio
                ><text class="cell-side">{{ $t("otc.index.buyin") }}</text>
              </label>
            </radio-group>
          </view>
        </view>
        <!-- <view class="safe-tip">
          提示：出售等于用户购买,购买等于用户出售
        </view> -->
        <view class="grace-form-item b-b">
          <text class="grace-form-label">{{$t('otc.index.unit_price')}}</text>
          <view class="grace-form-body">
            <input
              type="number"
              class="grace-form-input font-28"
              name="price"
              :placeholder="$t('otc.release.place_unit_price')"
              v-model="form.price"
              placeholder-class="font-28"
            />
          </view>
        </view>
        <view class="grace-form-item b-b">
          <text class="grace-form-label">{{$t('otc.release.total')}}</text>
          <view class="grace-form-body">
            <input
              type="number"
              class="grace-form-input font-28"
              name="num"
              :placeholder="$t('otc.release.place_total')"
              v-model="form.volume"
              placeholder-class="font-28"
            />
          </view>
        </view>
        <view class="grace-form-item b-b">
          <text class="grace-form-label">{{$t('otc.release.single_limit')}}</text>
          <view class="grace-form-body cell-cust">
            <input
              type="number"
              class="font-28 limit-l"
              name="min"
              :placeholder="$t('otc.release.min')"
              v-model="form.minTrade"
              placeholder-class="font-28"
            />
            <text class="gap">-</text>
            <input
              type="number"
              class="font-28 limit-r"
              name="max"
              v-model="form.maxTrade"
              :placeholder="$t('otc.release.max')"
              placeholder-class="font-28"
            />
          </view>
        </view>
        <button
          class="submit"
          @click="submit"
          :loading="loading['otc.exchange']"
        >
          {{$t('common.operate.sure')}}
        </button>
      </form>
      <!-- 密码输入弹出层 -->
      <cloudPayPassword
        :show="payPasswordShow"
        @keyboardDone="payPasswordDone"
        @close="togglePayPassword(false)"
      >
        <view slot="content">
          <view class="payDialog">
            <view class="mt-30">
              <view class="grace-flex grace-flex-center grace-flex-vbottom">
                <view class="font-28 color-b1">{{$t('otc.release.currency')}}:</view>
                <view
                  class="font-60 color-b1 ml-20"
                  style="line-height: 60rpx;"
                  >{{ form.volume }}</view
                >
                <view class="font-30 color-b1 ml-20">
                  {{ form.coin }}
                </view>
              </view>
            </view>
          </view>
        </view>
      </cloudPayPassword>
    </view>
  </cloudPage>
</template>

<script>
var graceChecker = require("@/graceUI/jsTools/graceChecker.js");
import { mapActions, mapGetters } from "vuex";
export default {
  data() {
    return {
      coinIndex: 0,
      pageLoading: true,
      payPasswordShow: false,
      form: {
        coin: undefined,
        side: 1,
        payment: undefined,
        price: undefined,
        volume: undefined,
        minTrade: undefined,
        maxTrade: undefined
      }
    };
  },
  computed: {
    ...mapGetters("otc", ["coin"]),
    ...mapGetters("user", ["banks"]),
    bankTypes(){
      return [
        { value: "alipay", name: this.$t('common.title.alipay') },
        { value: "wechat", name: this.$t('common.title.wechat') },
        { value: "bank", name: this.$t('common.title.bank_card') }
      ]
    },
    coinSelect() {
      let select = [this.$t('otc.release.select_currency')];
      if (this.coin) {
        this.coin.forEach(element => {
          select.push(element.name);
        });
      }
      return select;
    }
  },
  async onLoad() {
    await Promise.all([this.loadCoin(), this.loadBanks()]);
    this.pageLoading = false;
  },
  methods: {
    ...mapActions("otc", ["loadCoin", "exchange"]),
    ...mapActions("user", ["loadBanks"]),
    togglePayPassword(show) {
      this.payPasswordShow = show;
    },
    // 选择币种
    selectCoin(e) {
      this.coinIndex = e.detail.value;
      this.form.coin = e.detail.value
        ? this.coin[e.detail.value - 1].coin
        : undefined;
    },
    // 选择订单类型
    selectSide(e) {
      this.form.side = e.target.value;
    },
    // 选择支付方式
    selectPayment(e) {
      let values = e.detail.value;
      if (values != null && values.length > 0) {
        this.form.payment = values;
      } else {
        this.form.payment = undefined;
      }
    },
    // 确认下单
    submit() {
      let rule = [
        {
          name: "coin",
          checkType: "notnull",
          errorMsg: this.$t('otc.release.select_currency')
        },
        {
          name: "payment",
          checkType: "notnull",
          errorMsg: this.$t('otc.release.tips_payment_method')
        },
        {
          name: "price",
          checkType: "notnull",
          errorMsg: this.$t('otc.release.place_unit_price')
        },
        {
          name: "volume",
          checkType: "notnull",
          errorMsg: this.$t('otc.release.place_total')
        },
        {
          name: "minTrade",
          checkType: "notnull",
          errorMsg: this.$t('otc.release.tips_min')
        },
        {
          name: "maxTrade",
          checkType: "notnull",
          errorMsg: this.$t('otc.release.tips_max')
        }
      ];
      var checkRes = graceChecker.check(this.form, rule);
      if (!checkRes) {
        this.makeToast({ title: graceChecker.error, icon: "none" });
        return false;
      }
      this.payPasswordShow = true;
    },
    async payPasswordDone(param) {
      let form = this.form;
      let params = {
        type: form.side,
        num: form.volume,
        coin: form.coin,
        min: form.minTrade,
        max: form.maxTrade,
        price: form.price,
        bank_list: form.payment,
        pay_password: param.password
      };
      this.payPasswordShow = false;
      await this.exchange(params);
      this.makeToast({ title: this.$t('otc.release.submit_success'), icon: "none" });
      Object.keys(form).forEach(item => {
        if (item !== "side") form[item] = undefined;
        else form[item] = 1;
      });
      this.form = form;
      setTimeout(() => {
        uni.navigateBack();
      }, 1500);
    }
  }
};
</script>

<style scoped>
.main {
  background: #ffffff;
  height: 100%;
}
.b-b::after {
  position: absolute;
  z-index: 2;
  left: 30rpx;
  right: 0;
  height: 0;
  content: "";
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
  border-bottom: 1px solid #e4e7ed;
  bottom: 0;
}
.grace-form-item {
  justify-content: space-between;
  align-items: baseline;
  padding: 0 30rpx;
  position: relative;
}
.grace-form-label {
  color: #14191f;
  font-size: 30rpx;
}
.grace-check-item {
  display: inline-flex;
  align-items: center;
}
.grace-check-item radio {
  transform: scale(0.7);
  margin-left: 20rpx;
}
.grace-form-body {
  width: auto;
}
.grace-text {
  color: #0952c3;
  font-size: 28rpx;
}
.grace-icons {
  color: #0952c3;
}
.cell-side {
  font-size: 28rpx;
}
.safe-tip {
  font-size: 24rpx;
  color: #0952c3;
  background: #e8f2fc;
  padding: 20rpx 30rpx;
}
.cell-cust {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.cell-cust .limit-l {
  text-align: left;
  width: 150upx;
}
.cell-cust .limit-r {
  text-align: right;
  width: 150rpx;
}
.submit {
  margin: 60rpx 20rpx;
  background: #0952c3;
  color: #fff;
  font-size: 30rpx;
  height: 80rpx;
  line-height: 80rpx;
}
.payDialog {
  padding: 0rpx 44rpx;
}
.payDialog .input {
  width: 95rpx;
  height: 95rpx;
  text-align: center;
  border: 1rpx solid #d7d7d7;
  border-right: none;
}
.payDialog .input:last-child {
  border-right: 1rpx solid #d7d7d7;
}
</style>
